<template>
	<view>
		<view class="navbar">
			<view class="opbar">
				<image src="../../../static/imgs/backicon.png" @click="back"></image>
				<image src="../../../static/imgs/moreicon.png" @click="menuShow = !menuShow"></image>
			</view>
			<view class="tab">
				<view class="left-item">
					<view class="btn">
						机票
					</view>
				</view>
				<view class="right-item" @click="navTo('../trainTicket/trainTicket')">
					<view class="btn">
						火车票
					</view>
				</view>
			</view>
		</view>
		<view class="container">
			<u-tabs :is-scroll="false" :current="current" @change="change" :list="[{name: '单程'},{name: '特价机票'}]">
			</u-tabs>
			<block v-if="current == 0">
				<view class="destination">
					<text @click="navTo('./airport/airport?start=0')">{{startAddr}}</text>
					<view class="icon" @click="exchange">
						<image class="niao" src="../../../static/imgs/jipiao.png"></image>
						<image class="quan" src="../../../static/imgs/jipiao-quan.png"></image>
					</view>
					<text @click="navTo('./airport/airport?start=1')">{{endAddr}}</text>
				</view>
				<view class="date-container">
					<view class="date-item" @click="showDatePicker('startDate')">
						<text class="date">{{startDate}}</text>
						<text class="diff">{{startDateDiff}}</text>
					</view>
				</view>
				<view class="plane-type">
					<view class="left" @click="cangweiShow = true">{{cwStatus==0?'经济舱':'头等舱/公务舱'}}</view>
					<u-checkbox-group width="40rpx" class="right">
						<!-- 	<view @click.stop="yinger = !yinger">
							<view class="title">
								<u-checkbox shape="circle" v-model="yinger"></u-checkbox>携带婴儿
							</view>
							<view class="desc">14天-2岁</view>
						</view> -->
						<view>
							<view class="title">
								<u-checkbox shape="circle" v-model="ertong" @change="ertongChange"></u-checkbox>携带儿童
							</view>
							<view class="desc">2-12岁</view>
						</view>
					</u-checkbox-group>
				</view>
				<view class="xuzhi">
					儿童预定须知<u-icon name="info-circle" color="#3587F7" style="margin-left: 10rpx;"></u-icon>
				</view>
				<view class="search" @click="search">
					<view class="btn">搜 索</view>
				</view>
			</block>

			<!-- 		<view v-if="current == 1">
				<view class="destination">
					<text @click="addressShow = true">深圳</text>
					<view class="icon" @click="exchange">
						<image class="niao" src="../../../static/imgAll/jipiao-niao.png"></image>
						<image class="quan" src="../../../static/imgAll/jipiao-quan.png"></image>
					</view>
					<text @click="addressShow = true">常德</text>
				</view>

				<view class="date-container">
					<view class="date-item" @click="showDatePicker('startDate')">
						<text class="date">{{startDate}}</text>
						<text class="diff">{{startDateDiff}}</text>
					</view>
					<view style="color: #999999;">4天</view>
					<view class="date-item" @click="showDatePicker('endDate')">
						<text class="date">{{endDate}}</text>
						<text class="diff">{{endDateDiff}}</text>
					</view>
				</view>

				<view class="plane-type">
					<view class="left">经济舱</view>
					<u-checkbox-group width="40rpx" class="right">
						<view @click.stop="ertong = !ertong">
							<view class="title">
								<u-checkbox shape="circle" v-model="ertong"></u-checkbox>携带儿童
							</view>
							<view class="desc">2-12岁</view>
						</view>
						<view @click.stop="yinger = !yinger">
							<view class="title">
								<u-checkbox shape="circle" v-model="yinger"></u-checkbox>携带婴儿
							</view>
							<view class="desc">14天-2岁</view>
						</view>
					</u-checkbox-group>
				</view>

				<view class="xuzhi">
					儿童婴儿预定须知<u-icon name="info-circle" color="#3587F7" style="margin-left: 10rpx;"></u-icon>
				</view>

				<view class="search" >
					<view class="btn">搜 索</view>
				</view>
			</view> -->

			<!-- 		<view v-if="current == 2">
				<block v-for="index of count">
					<view class="destination">
						<text @click="addressShow = true">深圳</text>
						<view class="icon" @click="exchange">
							<image class="niao" src="../../../static/imgAll/jipiao-niao.png"></image>
							<image class="quan" src="../../../static/imgAll/jipiao-quan.png"></image>
						</view>
						<text @click="addressShow = true">常德</text>
					</view>

					<view class="date-container">
						<view class="date-item" @click="showDatePicker('startDate')">
							<text class="date">{{startDate}}</text>
							<text class="diff">{{startDateDiff}}</text>
						</view>
						<image class="close" src="../../../static/imgAll/chacha.png" @click="count--"></image>
					</view>
				</block>

				<view class="add-line" @click="count++">
					<image class="image" src="../../../static/imgAll/addblue.png"></image>再加一程
				</view>

				<view class="plane-type">
					<view class="left">经济舱</view>
					<u-checkbox-group width="40rpx" class="right">
						<view @click.stop="ertong = !ertong">
							<view class="title">
								<u-checkbox shape="circle" v-model="ertong"></u-checkbox>携带儿童
							</view>
							<view class="desc">2-12岁</view>
						</view>
						<view @click.stop="yinger = !yinger">
							<view class="title">
								<u-checkbox shape="circle" v-model="yinger"></u-checkbox>携带婴儿
							</view>
							<view class="desc">14天-2岁</view>
						</view>
					</u-checkbox-group>
				</view>
				<view class="xuzhi">
					儿童婴儿预定须知<u-icon name="info-circle" color="#3587F7" style="margin-left: 10rpx;"></u-icon>
				</view>
				<view class="search">
					<view class="btn">搜 索</view>
				</view>
			</view> -->

			<view v-if="current == 1">
				<view style="width: 100%;text-align: center;padding: 100rpx 0;">
					暂未开放!
				</view>
				<!-- 	<view class="destination">
					<text @click="addressShow = true">深圳</text>
					<view class="icon" @click="exchange">
						<image class="niao" src="../../../static/imgs/jipiao.png"></image>
						<image class="quan" src="../../../static/imgs/jipiao-quan.png"></image>
					</view>
					<text @click="addressShow = true">常德</text>
				</view>

				<view class="date-container">
					<view class="date-item" @click="showDatePicker('startDate')">
						<text class="date">{{startDate}}</text>
						<text class="diff">{{startDateDiff}}</text>
					</view>
				</view>

				<view class="search">
					<view class="btn">搜 索</view>
				</view> -->
			</view>
		</view>

		<!-- 	<view class="gengduo">
			<view class="top">
				<view class="title">更多低价机票</view>
				<view class="location">
					<image src="../../../static/imgAll/shdz.png"></image>
					<text>深圳出发</text>
				</view>
			</view>
			<view class="plane-type">
				<view class="list">
					<u-waterfall v-model="flowList">
						<template v-slot:left="{leftList}">
							<view v-for="(item, index) in leftList" :key="index" class="left-item">
								<view style="position: relative;">
									<image :src="item.img" class="image" mode="widthFix"></image>
									<view class="desc">{{item.desc}}</view>
								</view>
								<view class="start-end">
									{{item.start}} ---- {{item.end}}
								</view>
								<view class="info">
									<view class="time">{{item.time}}</view>
									<view class="price">￥{{item.price}}起</view>
								</view>
							</view>
						</template>
						<template v-slot:right="{rightList}">
							<view v-for="(item, index) in rightList" :key="index" class="left-item">
								<view style="position: relative;">
									<image :src="item.img" class="image" mode="widthFix"></image>
									<view class="desc">{{item.desc}}</view>
								</view>
								<view class="start-end">
									{{item.start}} ---- {{item.end}}
								</view>
								<view class="info">
									<view class="time">{{item.time}}</view>
									<view class="price">￥{{item.price}}起</view>
								</view>
							</view>
						</template>
					</u-waterfall>
				</view>
			</view>
		</view> -->
		<u-popup v-model="menuShow" mode="top" closeable>
			<view class="menu-container">
				<navigator url="./planeOrder" class="menu-item">
					<image src="../../../static/imgs/order.png" class="icon"></image>
					<text>订单</text>
				</navigator>
				<!-- <navigator url="./planeHistory" class="menu-item">
					<image src="../../../static/imgs/go.png" class="icon"></image>
					<text>浏览历史</text>
				</navigator> -->
			</view>
		</u-popup>

		<u-popup v-model="cangweiShow" mode="bottom" closeable>
			<view class="cangwei-container">
				<view class="cangwei-item" :class="{cur:cwStatus ==0}" @click="chooseCw(0)">
					<view>经济舱</view>
					<u-icon v-if="cwStatus ==0" name="checkbox-mark" color="#0042FF"></u-icon>
				</view>
				<view class="cangwei-item" :class="{cur:cwStatus ==1}" @click="chooseCw(1)">
					<view>头等舱/公务舱</view>
					<u-icon v-if="cwStatus ==1" name="checkbox-mark" color="#0042FF"></u-icon>
				</view>
			</view>
		</u-popup>

		<u-popup v-model="showCalendar" mode="bottom" closeable>
			<view class="calendar-box">
				<view class="title">
					选择出行日期
				</view>
				<calendar @changeDate="changeDate"></calendar>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import calendar from '@/components/calendar/hd-calendar.vue'
	import utils from '@/common/utils.js'
	export default {
		components: {
			calendar
		},
		data() {
			return {
				cwStatus: 0,
				showCalendar: false,
				current: 0,
				// count: 1,
				// yinger: false,
				ertong: false,
				menuShow: false,
				cangweiShow: false,
				startDate: '', // 展示出发时间
				startDateDiff: '',
				selectDateType: 'startDate',
				startAddr: '深圳',
				endAddr: '北京',
				tabNum: 0,
				peoType: 1, //乘机人
				cwType: 2, // 舱位类型
				departDate: '', // 出发时间
			}
		},
		onLoad() {
			this.startDate = utils.formatDate(new Date(), 'MM月DD日')
			this.startDateDiff = utils.timeDiffDate(new Date())
			this.departDate = utils.formatDate(new Date(), 'YYYY-MM-DD')
		},
		onShow() {
			let start = this.$store.state.start
			let end = this.$store.state.end
			if (start) {
				this.startAddr = start
			}
			if (end) {
				this.endAddr = end
			}
		},
		methods: {
			// 搜索机票
			search() {
				let that = this
				let {
					departDate,
					startAddr,
					endAddr,
					peoType,
					cwType
				} = this
				let obj = {
					departDate,
					startAddr,
					endAddr,
					peoType,
					cwType
				}
				that.$store.commit('changeSearchJp', obj)
				uni.navigateTo({
					url: './searchRes/searchRes',
				})
			},
			//是否携带儿童
			ertongChange(e) {
				if (e.value) {
					this.peoType = 3
				} else {
					this.peoType = 1
				}
			},
			// 仓位选择
			chooseCw(val) {
				this.cwStatus = val
				this.cangweiShow = false
				if (val == 0) {
					this.cwType = 2
				}
				if (val == 1) {
					this.cwType = 1
				}
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			back() {
				uni.switchTab({
					url: '../homePage'
				})
			},
			// 往返切换
			exchange() {
				let old = this.startAddr
				this.startAddr = this.endAddr
				this.endAddr = old
			},
			change(e) {
				this.current = e
			},
			// 日期选择
			showDatePicker(selectDateType = 'startDate') {
				this.selectDateType = selectDateType
				this.showCalendar = true
			},
			changeDate(e) {
				this.showCalendar = false
				if (this.selectDateType == 'startDate') {
					this.startDate = utils.formatDate(e.date, 'MM月DD日')
					this.departDate = utils.formatDate(e.date, 'YYYY-MM-DD')
					this.startDateDiff = utils.timeDiffDate(e.date)
				} else {
					this.endDate = utils.formatDate(e.date, 'MM月DD日')
					this.endDateDiff = utils.timeDiffDate(e.date)
				}
			}
		}
	}
</script>

<style lang="scss">
	.navbar {
		width: 100%;
		height: 30vh;
		background-image: url(../../../static/imgs/jipiao-banner.png);
		background-position: center center;
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: column;

		.opbar {
			margin-top: var(--status-bar-height);
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			padding: 10rpx 40rpx;

			image {
				width: 50rpx;
				height: 50rpx;
			}
		}

		.tab {
			background: rgba(0, 0, 0, 0.5);
			width: 95%;
			margin: 0 auto;
			color: #FFFFFF;
			font-size: 34rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-radius: 20rpx 20rpx 0 0;

			.left-item {
				width: 50%;
				padding: 15rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.btn {
					width: 330rpx;
					height: 66rpx;
					background: #FFFFFF;
					border-radius: 40rpx;
					font-size: 34rpx;
					font-family: Segoe UI;
					font-weight: 400;
					color: #3587F7;
					line-height: 66rpx;
					text-align: center;
				}
			}

			.right-item {
				width: 40%;
				padding: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}

	.container {
		background: #FFFFFF;
		width: 95%;
		margin: 0 auto 2.5% auto;
		color: #000;

		.destination {
			display: flex;
			align-items: center;
			justify-content: space-around;
			font-size: 40rpx;
			font-weight: bold;
			color: #333333;
			padding: 40rpx;
			border-bottom: 2rpx solid #f4f4f4;

			.icon {
				width: 60rpx;
				height: 60rpx;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				text-align: center;

				.niao {
					position: absolute;
					width: 30rpx;
					height: 30rpx;
					top: 15rpx;
					left: 15rpx;
				}

				.quan {
					position: absolute;
					width: 60rpx;
					height: 60rpx;
					top: 0;
					left: 0;
				}
			}

		}

		.date-container {
			padding: 40rpx;
			color: #333333;
			border-bottom: 2rpx solid #f4f4f4;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.date {
				font-size: 40rpx;
				font-weight: bold;
			}

			.diff {
				font-size: 32rpx;
				font-weight: 400;
				margin-left: 20rpx;
			}

			.close {
				width: 30rpx;
				height: 30rpx;
			}
		}

		.add-line {
			color: #3587F7;
			background: #F2F2F7;
			width: 95%;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 60rpx;
			margin: 0 auto;

			.image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 20rpx;
			}
		}

		.plane-type {
			width: 100%;
			padding: 40rpx;
			display: flex;
			justify-content: space-between;

			.left {
				width: 40%;
			}

			.right {
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #333333;
				font-size: 28rpx;

				.title {
					display: flex;
					align-items: center;
					justify-content: flex-end;
				}

				.desc {
					color: #999999;
					text-align: right;
				}
			}
		}

		.xuzhi {
			font-size: 24rpx;
			font-weight: 400;
			color: #333333;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			padding: 0 40rpx;
		}

		.search {
			padding: 40rpx;

			.btn {
				width: 100%;
				background: linear-gradient(90deg, #F8B036 0%, #F9862D 100%);
				height: 90rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #FFFFFF;
				font-size: 30rpx;
			}
		}
	}

	// .gengduo {
	// 	padding: 20rpx 2.5%;
	// 	background: linear-gradient(180deg, #FFFFFF 0%, #F2F2F2 50%, #F2F2F2 100%);

	// 	.top {
	// 		display: flex;
	// 		align-items: center;
	// 		justify-content: space-between;
	// 		padding-bottom: 20rpx;

	// 		.title {
	// 			font-size: 32rpx;
	// 			color: #333333;
	// 		}

	// 		.location {
	// 			border-radius: 40rpx;
	// 			background: #ECF5FF;
	// 			padding: 15rpx 25rpx;
	// 			color: #333333;
	// 			font-size: 26rpx;
	// 			display: flex;
	// 			align-items: center;
	// 			justify-content: center;

	// 			image {
	// 				width: 30rpx;
	// 				height: 30rpx;
	// 			}
	// 		}
	// 	}

	// 	.list {
	// 		.left-item {
	// 			width: 95%;
	// 			background-color: #FFFFFF;
	// 			margin: 0 auto;
	// 			margin-top: 20rpx;

	// 			.image {
	// 				width: 100%;
	// 			}

	// 			.desc {
	// 				position: absolute;
	// 				color: #FFFFFF;
	// 				bottom: 40rpx;
	// 				left: 0;
	// 				padding: 0 20rpx;
	// 			}

	// 			.start-end {
	// 				padding: 20rpx;
	// 				color: #333333;
	// 				font-size: 32rpx;
	// 				padding-bottom: 0;
	// 				font-weight: bolder;
	// 			}

	// 			.info {
	// 				padding: 20rpx;
	// 				width: 100%;
	// 				display: flex;
	// 				align-items: center;
	// 				justify-content: space-between;

	// 				.time {
	// 					font-size: 24rpx;
	// 					font-weight: 400;
	// 					color: #999999;
	// 				}

	// 				.price {
	// 					color: #FF7C0A;
	// 				}
	// 			}
	// 		}
	// 	}
	// }

	.menu-container {
		padding-top: calc(var(--status-bar-height) + 20rpx);
		padding-bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		background-color: #3e3e3e;

		.menu-item {
			width: 150rpx;
			height: 150rpx;
			margin-left: 20rpx;
			border-radius: 20rpx;
			background-color: #231C14;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			color: #FFFFFF;

			.icon {
				width: 50rpx;
				height: 50rpx;
				margin-bottom: 20rpx;
			}
		}
	}

	.cangwei-container {
		width: 100%;
		margin-top: 40rpx;

		.cangwei-item {
			padding: 40rpx;
			color: #333333;
			display: flex;
			align-items: center;
			justify-content: space-between;

			&.cur {
				color: #3587F7;
			}
		}
	}

	.calendar-pop {
		width: 100%;
		height: auto;
		background-color: #FFFFFF;

		.moreDate {
			padding-top: 28rpx;
			text-align: center;
			margin-bottom: 20rpx;
		}
	}

	.biaoti {
		padding: 30rpx;
		width: 100%;
		text-align: center;
		font-size: 34rpx;
		font-weight: bold;
	}

	.history {
		width: 100%;
		height: 60vh;

		.title {
			font-size: 28rpx;
			font-weight: bold;
			color: #333333;
			padding: 20rpx 40rpx;
		}

		.address-list {
			display: flex;
			align-items: center;
			justify-content: space-around;
			flex-wrap: wrap;

			.address-item {
				width: 20%;
				margin: 15rpx 10rpx;
				height: 50rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #F8F8F8;

				&.cur {
					border: 2rpx solid #3587F7;
				}
			}
		}
	}

	.calendar-box {
		.title {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			font-size: 34rpx;
			font-family: Segoe UI;
			font-weight: 400;
			color: #333333;
		}
	}

	/deep/ .u-close--top-right {
		top: 44rpx !important;
	}
</style>
